PyCafe - Dash - Interactive Color Selector with Dash

app.py
requirements.txt
vgchartz-2024.csv
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
from dash import Dash, dcc, html
from dash.dependencies import Output, Input
from dash_bootstrap_templates import load_figure_template
import dash_bootstrap_components as dbc

import plotly.express as px
import pandas as pd

# Load and preprocess the dataset
video_games = (
    pd.read_csv("vgchartz-2024.csv", parse_dates=["release_date"])
    .rename({
        "title": "Title",
        "console": "Console",
        "genre": "Genre",
        "publisher": "Publisher",
        "developer": "Developer"
    }, axis=1)
    .assign(release_year=lambda x: x["release_date"].dt.year)
)

dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"

# Initialize the Dash app
app = Dash(__name__, external_stylesheets=[dbc.themes.CYBORG, dbc_css])

# Load the template for consistent styling
load_figure_template("CYBORG")

# Define the layout of the app
app.layout = dbc.Container([
    html.H1("Video Game Explorer", style={"text-align": "center"}),
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dcc.Markdown("**Select Category**"),
                dcc.Dropdown(
                    id="category-dropdown",
                    options=[
                        {"label": "Title", "value": "Title"},
                        {"label": "Genre", "value": "Genre"},
                        {"label": "Publisher", "value": "Publisher"},
                        {"label": "Developer", "value": "Developer"},
                        {"label": "Console", "value": "Console"}
                    ],
                    value="Title",
                    className="dbc"
                ),        
            ])
        ]),
        dbc.Col([
            dbc.Card([
                dcc.Markdown("**Select Region**"),
                dcc.RadioItems(
                    id="region-radio",
                    options=[
                        {"label": "World Total", "value": "total_sales"},
                        {"label": "North America", "value": "na_sales"},
                        {"label": "Japan", "value": "jp_sales"},
                        {"label": "Europe/Africa", "value": "pal_sales"},
                        {"label": "Rest of World", "value": "other_sales"}
                    ],
                    value="total_sales",
                    className="dbc"
                ),        
            ])
        ]), 
    ]),
    html.Br(),
    dbc.Row(dcc.Graph(id="sales-line")),
    html.Br(),
    dbc.Row(dcc.Graph(id="rankings-bar")),
])

# Define the callback to update the graphs
@app.callback(
    [Output("sales-line", "figure"),
     Output("rankings-bar", "figure")],
    [Input("category-dropdown", "value"),
     Input("region-radio", "value")]
)
def vg_plotter(category, region):
    # Line chart: annual sales
    annual_sales = video_games.groupby("release_year", as_index=False).agg({region: "sum"})

    fig = px.line(
        annual_sales,
        x="release_year",
        y=region,
        title=f"Video Game Sales in {region} Over Time",
        line_shape="spline"
    ).update_traces(line_color="#32CD32")

    # Bar chart: top 10 sellers
    top10_sellers = (
        video_games
        .groupby(category, as_index=False)
        .agg({region: "sum"})
        .sort_values(region, ascending=False)
        .iloc[:10]
    )

    fig2 = px.bar(
        top10_sellers,
        x=category, 
        y=region,
        color=region,
        color_continuous_scale=["#98FB98", "#006400"],  # Light green to dark green
        title=f"Top Video Sales by {category} in {region}"
    )

    return fig, fig2

# Run the server
if __name__ == "__main__":
    app.run_server(debug=True)
Py.Cafe

Guided Project at MavenAnlytics

Interactive Color Selector with Dash
